<!--线路管理-->
<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20">
            <el-row class="text-left">
                <!--线路选择器-->
                <div class="dlblock-mb20">
                    <span class="pr5">线路类型</span>
                    <el-select style="width: 180px" v-model="routeType" clearable placeholder="请选择">
                        <el-option
                                v-for="item in routeTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <!--营运类型选择器-->
                <div class="dlblock-mb20">
                    <span class="pr5">&ensp;&ensp;&ensp;营运类型</span>
                    <el-select style="width: 180px" v-model="operation" clearable placeholder="请选择">
                        <el-option
                                v-for="item in operations"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="dlblock-mb20">
                    <span class="pr5">&ensp;&ensp;&ensp;线路名称</span>
                    <el-input
                            style="width: 180px"
                            placeholder="请输入内容"
                            v-model="routeName"
                            maxlength="10"
                            clearable>
                    </el-input>
                </div>

                <div class="dlblock-mb20">
                    <span class="pr5">&ensp;&ensp;&ensp;限速值</span>
                    <el-input
                            style="width: 180px"
                            placeholder="请输入内容（m/h）"
                            v-model="speed"
                            oninput="if(value.length>6)value=value.slice(0,8)"
                            type="number"
                            clearable>
                    </el-input>
                </div>

                <div class="dlblock-mb20 pr5 pl5">
                    <el-button class="el-icon-search ml5" circle @click="getData()"></el-button>
                </div>
                <div class="dlblock-mb20 pr5 pl5">
                    <router-link :to="{path: '/route/edit'}">
                        <el-button type="primary">新增线路</el-button>
                    </router-link>
                </div>
                <div class="dlblock-mb20 pr5 pl5">
                    <el-button type="danger" @click="delRoutes()">删除线路</el-button>
                </div>

                <!--<div class="dlblock-mb20 pr5 pl5">-->
                <!--<el-button type="info">导出列表</el-button>-->
                <!--</div>-->

            </el-row>
            <!--表格区域-->
            <el-row>
                <el-table
                        class="my-table"
                        :data="tableData" stripe
                        v-loading="loading"
                        :header-row-class-name="'my-table-header'"
                        @selection-change="handleSelectionChange"
                        @row-dblclick="choseRow($event)"
                        ref="myTable"
                        border>
                    <el-table-column type="selection" align="center" fixed width="55">
                    </el-table-column>
                   <!-- <el-table-column align="center" prop="index" label="序号"></el-table-column>-->
                    <el-table-column align="center" prop="groupName" label="分组"></el-table-column>
                    <el-table-column align="center" label="线路"></el-table-column>
                    <el-table-column align="center" prop="routeType" label="线路类型"></el-table-column>
                    <el-table-column align="center" prop="lineCount" label="支线数"></el-table-column>
                    <el-table-column align="center" prop="" label="站点数"></el-table-column>
                    <el-table-column align="center" prop="duration" label="标准运营时长(h)"></el-table-column>
                    <el-table-column align="center" prop="limitSpeed" label="全局限速(km/h)"></el-table-column>
                    <el-table-column align="center" label="操作" fixed="right"></el-table-column>
                </el-table>
                <div class="my-pagination">
                    <el-pagination background layout="total, prev, pager, next" :total="pages.total"
                                   :current-page="pages.page" @current-change="pageChange"></el-pagination>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {delRoute, getRoutes} from '@/api';

    export default {
        name: "index1",
        data() {
            return {
                routeName: null,
                speed: null,
                routeType: null,
                operation: null,
                tableData: [],
                tableSelection: [],
                loading: false,
                pages: {
                    page: 1,
                    total: 0,
                    size: 15
                },
            }
        },


        methods: {

            /**
             * 获取表格数据
             */
            getData() {
                /*this.loading = true
                getRoutes({
                    pageNum: this.pages.page,
                    routeName: this.routeName,
                    limitSpeed: this.speed,
                    routeType: this.operation,
                    operation: this.routeType
                }).then(res => {
                    if (res != null && res.code == 200) {
                        this.tableData = res.data.list;
                        this.pages.total = res.data.count;
                    }
                }).finally(
                    this.loading = false
                )*/
            },

            /**
             * 分页切换
             * @param val
             */
            pageChange(val) {
                this.pages.page = val;
                this.getData();
            },

            /**
             * 删除单条线路
             * @param row
             */
            delOne(row) {
                this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delRoute({id: row.routeId}).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.getData()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },

            handleSelectionChange(val) {
                this.tableSelection = val;
            },

        },

        mounted() {
            this.getData()
        }

    }
</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td{
        padding: 0 !important;
        height: 35px;
        line-height: 35px;
    }
</style>
